<template>
  <div class="love_box">
      <div class="love_title">
        <span class="iconfont icon">&#xe6ad;</span><span> 猜你喜欢</span>
      </div>

     <div class="love_box_item">
         <div class="love_item_context" v-for="(item,index) in hotlist" :key="index" @click="gotoxiang(item.id)">
             <div class="love_item_cont_img"><img :src="item.imgurl" alt="" width="100%" height="100%"></div>
             <div class="love_item_cont_">
                 <p class="love_item_cont_p2">{{item.name}}</p>
                 <p class="iconfont">&#xe600;&#xe600;&#xe600;&#xe600;&#xe600;</p>
             </div>
         </div>
     </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            hotlist:[
                {
                    "id":1,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_250x250_0fc722c0.jpg",
                    "name":"故宫",
                    "price":"65",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/ab/159673b63e6ca702.png"
                },
                {
                    "id":2,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1507/cc/19733fc0135062788140cbb48ae606a7.water.jpg_250x250_48713510.jpg",
                    "name":"北京野生动物园",
                    "price":"140",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/2d/36d0c4adaebbbc02.png"
                },
                {
                    "id":3,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2007/5e/5e24b3e9082ce5bfa3.img.jpg_250x250_2383e5b0.jpg",
                    "name":"北京欢乐谷",
                    "price":"191",
                    "hot":"https://imgs.qunarzz.com/piao/fusion/1710/67/edc47ffef9e96b02.png"
                },
                {
                    "id":4,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1505/f5/f5f45e1a83537bcb.water.jpg_250x250_63e3520a.jpg",
                    "name":"圆明园",
                    "price":"10"
                },
                {
                    "id":5,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/30/307fa37039eab5cba3.water.jpg_250x250_d76001d5.jpg",
                    "name":"颐和园",
                    "price":"29"
                },
                {
                    "id":6,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/39/3979f1867defec4ea3.water.jpg_250x250_e1b08a5e.jpg",
                    "name":"八达岭长城",
                    "price":"40"
                },
                {
                    "id":7,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/201311/12/3e2de7e7f2fa170fc8d65eac.jpg_250x250_94572c5c.jpg",
                    "name":"八达岭野生动物园",
                    "price":"78.5"
                },
                {
                    "id":8,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/2005/4a/4a2a2afc7a3ca8a6a3.water.jpg_250x250_60db863a.jpg",
                    "name":"古水北镇",
                    "price":"140"
                },
                {
                    "id":9,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/1609/7a/7ae8ee7831836095a3.water.jpg_250x250_95e31629.jpg",
                    "name":"金海湖风景区",
                    "price":"29.9"
                },
                {
                    "id":10,
                    "imgurl":"https://imgs.qunarzz.com/sight/p0/201308/08/41150dacc0e3a0c8c8d65eac.jpg_250x250_d76e727c.jpg",
                    "name":"北京动物园",
                    "price":"20.8"
                }
            ]
        }
    },
    methods:{
        // 进入详情页
        gotoxiang(id){
            this.$router.push({
                path:"/about",
                query:{
                    id
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.love_box
  width 100%
  .love_title
    width 100%
    text-indent: 0.3rem;
    padding: .24rem 0 .26rem;
  .icon
    color red 
  .love_box_item
    width 100%
    display flex
    flex-wrap wrap
    margin-bottom 2rem
    
    .love_item_context
       width 100%
       height 2rem
       padding 0.17rem
       display flex
       .love_item_cont_img
        width 27.92%
        height 100%
       .love_item_cont_
        padding 0.17rem
        .iconfont
         color #ffb436
        .love_item_cont_p2
         line-height 0.68rem
</style>